<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <style>
        .form-select {
            width: 103px;
            display: inline-block;
        }
        
        .col-form-label {
            text-align: right;
        }
        
        .figure-img {
            width: 100px;
            height: 100px;
            cursor: pointer;
        }
        
        #upload {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1 class="p-5">个人设置</h1>
        <form class="col-4">
            <div class="row mb-3">
                <label class="col-form-label col-3">昵称：</label>
                <div class="col-9">
                    <input class="form-control col-9" type="text" name="nickname" />
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-form-label col-3">籍贯：</label>
                <div class="col-9">
                    <select class="form-select col-4" name="province">
            <option value="">--省--</option>
          </select>
                    <select class="form-select col-4" name="city">
            <option value="">--市--</option>
          </select>
                    <select class="form-select col-4" name="area">
            <option value="">--区--</option>
          </select>
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-form-label col-3">头像：</label>
                <div class="col-9">
                    <input class="form-control col-9" type="hidden" name="avatar" />
                    <figure class="figure">
                        <input type="file" id="upload" />
                        <img src="https://yanxuan-item.nosdn.127.net/12a882699bd531a1bd428bffe1989525.jpg" class="figure-img img-fluid rounded" alt="..." />
                        <figcaption class="figure-caption">修改头像</figcaption>
                    </figure>
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-3"></label>
                <div class="col-9">
                    <button class="btn btn-primary">保存</button>
                </div>
            </div>
        </form>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script src="./lib/bootstrap.min.js"></script>
    <script src="./lib/axios.js"></script>
    <script>
        axios.defaults.baseURL = 'http://ajax-api.itheima.net';


        // 昵称
        const nickname = document.querySelector('[name=nickname]')

        // 省市区
        const province = document.querySelector('[name=province]')
        const city = document.querySelector('[name=city]')
        const area = document.querySelector('[name=area]')


        // 接口文档：https://www.showdoc.com.cn/1834761734600444/8477923164668939


        // 功能列表
        // 功能1: 上传头像
        const upload = document.querySelector('#upload')
        const avatar = document.querySelector('.figure img')

        avatar.addEventListener('click', function() {
            upload.click()
        })
        upload.addEventListener('change', async function() {
            const file = this.files[0]
            if (!file) {
                return alert('1')
            }
            const fd = new FormData()
            fd.append('avatar', file)
            const {
                data: {
                    data: {
                        url: res
                    }
                }
            } = await axios.post('/api/file', fd)
            console.log("~ ~ res", res)
            avatar.src = res


        })

        // 功能2: 页面初始化: 获取个人信息，并渲染到页面中

        axios.get('/api/settings').then(async({
            data
        }) => {
            console.log(data);
            console.log(data.data.province)

            //昵称
            nickname.value = data.data.nickname
                // 省
            await fn()
            document.querySelector('[name=province]').value = data.data.province
            await fn2(data.data.province)
            document.querySelector('[name=city]').value = data.data.city
            await fn3(data.data.province, data.data.city)
            document.querySelector('[name=area]').value = data.data.area
            avatar.src = data.data.avatar
        })



        // 功能3: 省市区的联动效果
        async function fn() {
            //省数据
            const {
                data: {
                    data: provinceData
                }
            } = await axios.get('/api/province')
                // console.log(provinceData)
            const str = provinceData.map(item => `<option value="${item}">${item}</option>`).join('')
                // console.log("~ ~ str", str)
            province.innerHTML = '<option value="">--省--</option>' + str
        }

        async function fn2(pname) {
            //市数据
            const {
                data: {
                    data: cityData
                }
            } = await axios.get('/api/city', {
                    params: {
                        pname
                    }
                })
                // console.log(cityData)
            const str2 = cityData.map(item => `<option value="${item}">${item}</option>`).join('')
                // console.log("~ ~ str", str)
            city.innerHTML = '<option value="">--市--</option>' + str2
        }

        async function fn3(pname, cname) {
            //区数据
            const {
                data: {
                    data: areaData
                }
            } = await axios.get('/api/area', {
                    params: {
                        pname,
                        cname
                    }
                })
                // console.log(areaData)
            const str3 = areaData.map(item => `<option value="${item}">${item}</option>`).join('')
                // console.log("~ ~ str", str)
            area.innerHTML = '<option value="">--市--</option>' + str3

        }





        //省的change事件
        province.addEventListener('change', async function() {
                console.log(this.value);
                //市数据
                const {
                    data: {
                        data: cityData
                    }
                } = await axios.get('/api/city', {
                    params: {
                        pname: this.value
                    }
                })
                console.log(cityData)
                const str2 = cityData.map(item => `<option value="${item}">${item}</option>`)

                city.innerHTML = '<option value="">--市--</option>' + str2

                area.innerHTML = '<option value="">--市--</option>'
            })
            //市的change事件
        city.addEventListener('change', async function() {
            console.log(this.value);
            //区数据
            const {
                data: {
                    data: areaData
                }
            } = await axios.get('/api/area', {
                    params: {
                        pname: province.value,
                        cname: this.value
                    }
                })
                // console.log(areaData)
            const str3 = areaData.map(item => `<option value="${item}">${item}</option>`).join('')
                // console.log("~ ~ str", str)
            area.innerHTML = '<option value="">--市--</option>' + str3

        })



        // 功能4: 保存个人信息，刷新页面，可以看到自己保存的个人信息
        //        说明：由于接口提供的是相同账号下的个人信息，所以当大家都在练习的时候，会出现互相覆盖的情况

        document.querySelector('.btn').addEventListener('click', function(e) {
            e.preventDefault()
            axios({
                method: 'put',
                url: '/api/settings',
                data: {
                    nickname: nickname.value,
                    province: province.value,
                    city: city.value,
                    area: area.value,
                    avatar: avatar.src
                }
            }).then((res) => {
                console.log(res);
            })
        })









        // 要求： 
        // 1. 使用 axios 发送请求
        // 2. 设置 axios 请求根路径
        // 3. 配合 async await 完成功能
    </script>
</body>

</html>